
import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, ScrollView, Text } from '@tarojs/components'
import { showToast, getThemeStyle } from '@/utils'
import api from '@/api'
import { SpAddress, SpLoading, SpNavBar, SpNote } from '@/components'
import { SelectInput, CommonButton } from '@/components/sp-page-components'
import './index.scss'

import {
    Switch,
    Space,
    Tag,
    Button,
} from 'antd-mobile'


const PAGE_TYPE = 'peopleList'
import {
    SHOP_MAP,
} from '../good/const'

export default class Address extends Component {
    constructor() {
        super()
        this.state = {
            addressList: null,
            isActive: null,
            loading: false,
            //搜索框选择的参数  类型为对象
            inputParams: null,
            //搜索框输入的值
            inputValue: undefined,
            //筛选参数
            filterParams: null,
        }
    }
    componentDidShow() {
        this.getConfig()
    }

    async getConfig() {
        this.setState({
            loading: true
        })
        let synthetic = {}
        if (this.state.inputParams && this.state.inputValue) {
            synthetic[this.state.inputParams.value] = this.state.inputValue
        }
        const data = {
            page: 1,
            pageSize: 10000,
            operator_type: 'distributor',
            ...synthetic,
        }
        const result = await api.shop.getPeopleManagement(data)
        this.setState({
            loading: false
        })
         this.setState({
            addressList: result.list,
        })
        console.log(result)
    }
    incrementAddress() {
        Taro.navigateTo({
            url: `/pages/peopleMana/add`
        })
    }


    handleValueChange = (inputValue) => {
        this.setState({
            inputValue: inputValue
        })
    }

    handleSearchFilter = async () => {
        this.setState({
            addressList: []
        })
        this.getConfig()
    }

    handleParamChange = (inputParams) => {

        this.setState({
            inputParams: { ...inputParams }
        })
    }
    render() {
        const { inputParams, inputValue, addressList, filterParams } = this.state
        return (
            <><SpNavBar title="店铺管理员"> </SpNavBar>
                <View className='page-people' style={getThemeStyle()}>
                    <View className='page-people-list-input' >
                        <SelectInput
                            inputParam={inputParams}
                            inputValue={inputValue}
                            pageType={PAGE_TYPE}
                            paramChange={this.handleParamChange}
                            valueChange={this.handleValueChange}
                            onInputConfirm={this.handleSearchFilter}
                        />
                    </View>
                    {this.state.loading && <SpLoading>正在加载...</SpLoading>}
                    {this.state.addressList && this.state.addressList.length > 0 ? (
                        <ScrollView className='peopleBox'>
                            {this.state.addressList.map((item, index1) => {
                                return (

                                    <View key={item.operator_id} className='peopleBox-people'>
                                        <View className='item'>
                                            <View className='people'>
                                                <View className='shop'>登录账号:{item.login_name}<Tag style={{ '--background-color': '#fef0f0', '--text-color': '#f56c6c', '--border-color': '#fde2e2' }}>管理员</Tag></View>
                                                <View className='name_tel'><Text>姓名：{item.username}</Text><Text className='name-text'>手机号:{item.mobile}</Text></View>
                                                <Space wrap>
                                                    {item.distributor_ids.map((value, index) => {
                                                        return (<Tag key={'tag' + index} style={{ '--background-color': '#e7f1ff', '--text-color': '#21b991', '--border-color': '#d9ecff' , 'fontSize':'14px'}}>{value.name}</Tag>)
                                                    })}
                                                </Space>
                                            </View>
                                        </View>
                                        <View className='comp-item-action'>
                                            <Space align='center'><Text >禁用</Text>
                                                <Switch checked={item.is_disable} onChange={async val => {
                                                    console.log(val)
                                                    await api.shop.getPeopleChangestatus({ is_disable: val ? '1' : '0', operator_id: item.operator_id })
                                                    this.state.addressList[index1].is_disable = val
                                                    this.setState({
                                                        addressList: this.state.addressList
                                                    })
                                                }}></Switch>
                                            </Space>
                                            <Button
                                                style={{ 'padding': '0 15px', 'lineHeight': '30px', '--text-color': '#21b991', '--border-color': '#21b991', '--border-radius': '20px' }}
                                                onClick={ () =>{
                                                    Taro.setStorageSync('peopleManInfo', item)
                                                    Taro.navigateTo({
                                                        url: `/pages/peopleMana/add?id=${item.operator_id}`
                                                    })
                                                }}
                                            >编辑</Button>

                                        </View>
                                    </View>


                                )
                            })}
                        </ScrollView>
                    ) : (
                        <SpNote className="note-list" img='empty.png'>暂无数据～</SpNote>
                        // <View style='text-align: center;'>暂无地址</View>
                    )}

                    <View className='confirm'>
                        <View className='btn' onClick={(e) => this.incrementAddress()}>
                            添加店铺员工
                        </View>
                    </View>
                </View>
            </>

        )
    }
}
